<template>
  <div class="admin-manage" v-loading="isLoading">
        <div class="real-name">
            <el-form :inline="true" :model="formInline" ref="formInline" label-width="100px">
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker v-model="formInline.startTime" type="date"
                        :picker-options="pickerStartTimeOptions" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker v-model="formInline.endTime" type="date" :picker-options="pickerEndTimeOptions"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="巡更线路" prop="line">
                    <el-select v-model="formInline.line" placeholder="请选择巡更线路">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option :label="item.name" :value="item.id" v-for="item in lineList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="巡更点" prop="point">
                    <el-select v-model="formInline.point" placeholder="请选择巡更项目">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option :label="item.point_name" :value="item.id" v-for="item in patrolPointList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="巡更人员" prop="user">
                    <el-select v-model="formInline.user" placeholder="请选择巡更人员">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option :label="item.name" :value="item.id" v-for="item in staffList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否巡更" prop="patrolStatus">
                    <el-select v-model="formInline.patrolStatus" placeholder="请选择是否巡更">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option :label="item.name" :value="item.value" v-for="item in isPatrolList" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目状态" prop="projectStatus">
                    <el-select v-model="formInline.projectStatus" placeholder="请选择项目状态">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option :label="item.name" :value="item.value" v-for="item in patrolStatusList" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <div class="set-btns">
                    <el-button @click="search" :disabled="isLoading" type="primary">查询</el-button
                    ><el-button @click="reset">重置</el-button>
                </div>
            </el-form>
        </div>
        <!-- <div class="set-btns-right">
            <el-button icon="el-icon-top-right" v-if="is_superuser || permission_map['23a']" type="primary">导出</el-button>
        </div> -->
        <el-table
        :data="tableData"
        border
        style="width: 100%">
            <el-table-column
                label="序号"
                width="80">
                <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column
                prop="patrol_date"
                label="日期"
                width="100">
            </el-table-column>
            <el-table-column
                prop="patrol_route"
                label="巡更路线"
                width="180">
            </el-table-column>
            <el-table-column
                label="巡更点">
                <template slot-scope="scope">
                    <div v-if="scope.row.patrol_point">
                        <div v-if="scope.row.patrol_point == item.id" v-for="item in patrolPointList" :key="item.id">{{item.point_name}}</div>
                    </div>
                    <div v-else>/</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="patrol_project"
                label="巡更项目">
            </el-table-column>
            <el-table-column
                prop="committer_name"
                label="巡更人员"
                width="100">
            </el-table-column>
            <el-table-column
                label="是否巡更"
                width="80">
                <template slot-scope="scope">
                    <span :class="scope.row.patrol_status == 0 ?'red':'yellow'">{{scope.row.patrol_status == 0 ? '否':'是'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="项目状态"
                width="140">
                <template slot-scope="scope">
                    <span v-if="scope.row.file_type" :class="scope.row.file_type == 3 ?'red':'green'">{{scope.row.file_type == 3 ? '异常':'正常'}}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                label="巡更时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.patrol_time">
                        <span :class="scope.row.patrol_status === 0 && (((Date.parse(scope.row.patrol_time)/1000) >= (Date.parse(scope.row.start_time)/1000)) && ((Date.parse(scope.row.patrol_time)/1000)<=(Date.parse(scope.row.start_time)/1000)))">{{scope.row.patrol_time}}</span>
                    </span>
                    <span v-else>/</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                width="120px">
                <template slot-scope="scope">
                    <el-button @click="checkBtn(scope.row)" type="text">查看</el-button>
                    <el-button @click="downBtn(scope.row)" type="text" v-if="is_superuser || permission_map['23a']">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="admin-page"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="20"
            layout="sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
        <el-dialog title="智能巡更" :visible.sync="dialogClap" width="730px">
            <div class="clap-at-will-container" id="dialogClap">
                <el-form label-width="100px">
                    <div class="status-text">
                        <div v-for="item in patrolStatusList" :key="item.value">
                            <div :class="projectInfo.file_type === 3 ? 'red-fill':'green-fill'" v-if="projectInfo.file_type == item.value">{{item.name}}</div>
                        </div>
                    </div>
                    <el-form-item label="巡更时间：">{{projectInfo.patrol_time?projectInfo.patrol_time:'/'}}</el-form-item>
                    <el-form-item label="巡更人员：">{{projectInfo.committer_name?projectInfo.committer_name:'/'}}</el-form-item>
                    <el-form-item label="巡更点：">
                        <div v-if="projectInfo.patrol_point == item.id" v-for="item in patrolPointList" :key="item.id">{{item.point_name}}</div>
                    </el-form-item>
                    <el-form-item label="巡更项目：">{{projectInfo.patrol_project?projectInfo.patrol_project:'/'}}</el-form-item>
                    <el-form-item label="内容：">{{projectInfo.content?projectInfo.content:'/'}}</el-form-item>
                    <el-form-item label="巡更图片：" v-if="projectInfo.images && projectInfo.images.length > 0">
                        <div class="upload-handle-imgs">
                            <div class="handle-img" @click="showImg(projectInfo.images, $index)" v-for="(site, $index) in projectInfo.images">
                                <img :src="$IMGURL + site.img"/>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="验收视频：" v-if="projectInfo.video_file">
                        <div class="upload-handle-imgs">
                            <div class="handle-img" @click="showVideo(projectInfo.video_file)">
                                <video :src="$IMGURL + projectInfo.video_file" ref="video" width="148" height="148">
                                    您的浏览器不支持 video 标签。
                                </video>
                                <i class="el-icon-caret-right"></i>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClap = false">取消</el-button>
            </span>
        </el-dialog>
        <el-carousel 
            v-if="dialogImg" 
            class="pic-preview" 
            width="100%" 
            height="100%" 
            :autoplay="false" 
            indicator-position="none" 
            :initial-index="imageIndex"
            :loop="false">
            <i class="el-icon-close" @click="dialogImg = false"></i>
            <el-carousel-item v-for="item in imageList" :key="item">
                <el-image
                :src="$IMGURL + item.img"
                fit="contain"></el-image>
            </el-carousel-item>
        </el-carousel>
        <el-dialog title="验收视频" :visible="dialogVideo" width="940px" @close="dialogVideo = false">
            <video :src="$IMGURL + currtVideo" ref="video" autoplay width="900" height="500" controls="controls">
              您的浏览器不支持 video 标签。
            </video>
        </el-dialog>
  </div>
</template>
<script>
    export default {
        props: {
            patrolPointList: Array,
            staffList: Array,
            lineList: Array
        },
        watch() {
        },
        data() {
            return {
                isLoading: false,
                tableData: [],
                pagesize: 20,
                currentPage: 1,
                count: 0,
                isPatrolList: [
                    {name: '是', value: 1},
                    {name: '否', value: 0}
                ],
                patrolStatusList: [
                    {name: '异常', value: 3},
                    {name: '正常', value: 4}
                ],
                pickerStartTimeOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                pickerEndTimeOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                formInline: {
                    startTime: '',
                    endTime: '',
                    line: '',
                    point: '',
                    user: '',
                    patrolStatus: '',
                    projectStatus: ''
                },
                field_name: '',
                projectInfo: '',
                dialogClap: false,
                dialogImg: false,
                imageList: [],
                imageIndex: 0,
                dialogVideo: false,
                currtVideo: '',
                permission_map: {},
                is_superuser: false
            }
        },
        created() {
            if(localStorage.getItem('user_info')) {
                this.permission_map = JSON.parse(localStorage.getItem('user_info')).permission_map;
                this.is_superuser = JSON.parse(localStorage.getItem('user_info')).is_superuser;
            }
            this.pagesize = this.pageSize;
            this.requestInfo(1);
        },
        watch: {
            'formInline.startTime': function () {
                let _that = this;
                this.pickerEndTimeOptions = {
                    disabledDate(time) {
                        if (_that.formInline.startTime) return time.getTime() > Date.now() || time.getTime() < _that.formInline.startTime.getTime();
                        else return time.getTime() > Date.now();
                    }
                }
            },
            'formInline.endTime': function () {
                let _that = this;
                this.pickerStartTimeOptions = {
                    disabledDate(time) {
                        if (_that.formInline.endTime) return time.getTime() > Date.now() || time.getTime() > _that.formInline.endTime.getTime();
                        else return time.getTime() > Date.now();
                    }
                }
            }
        },
        methods: {
            requestInfo(val) {
                this.isLoading = true;
                this.currentPage = val;
                let start_time='';
                let end_time='';
                if (this.formInline.startTime && this.formInline.endTime) {
                    start_time = this.common.formatTimestamp_min(Date.parse(this.formInline.startTime) / 1000);
                    end_time = this.common.formatTimestamp_min(Date.parse(this.formInline.endTime) / 1000 + 86399);
                }
                this.$http.get(`/api/v1/patrol/record/?page=${this.currentPage}&page_size=${this.pagesize}&patrol_field=${this.$route.query.id}&patrol_route=${this.formInline.line}&patrol_point=${this.formInline.point}&committer_name=${this.formInline.user}&patrol_status=${this.formInline.patrolStatus}&file_type=${this.formInline.projectStatus}&start_time=${start_time}&end_time=${end_time}`)
                .then((res)=>{
                    this.isLoading = false;
                    this.tableData = res.data;
                    this.count = res.count;
                })
                .catch(()=>{
                    this.isLoading = false;
                })
            },
            handleCurrentChange(val) {
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(val);
            },
            handleSizeChange(val) {
                this.pagesize = val;
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(1);
            },
            // 查询
            search() {
                if ((!this.formInline.startTime && this.formInline.endTime) || (this.formInline.startTime && !this.formInline.endTime)) {
                    return this.$message.warning('请选择完整时间段');
                }
                this.requestInfo(1);
            },
            // 重置
            reset() {
                this.$refs.formInline.resetFields();
                this.requestInfo(1);
            },
            // 查看
            checkBtn(item) {
                this.isLoading = true;
                this.$http.get(`/api/v1/patrol/record/${item.id}`)
                .then((res) => {
                    this.dialogClap = true;
                    this.projectInfo = res.data;
                    this.$nextTick(() => {
                        var container = this.$el.querySelector("#dialogClap");
                        container.scrollTop = 0;
                    })
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                })
            },
            // 下载
            downBtn(item) {
                this.isLoading = true;
                this.$http.download({
                    file: item.id
                }, `${item.patrol_project}${item.patrol_time}`).then(() => {
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                })
            },
            showImg(list, index) {
                this.dialogImg = true;
                this.imageList = list;
                this.imageIndex = index;
            },
            showVideo(video) {
                this.dialogVideo = true;
                this.currtVideo = video;
                this.$nextTick(() => {
                    this.$refs.video.currentTime = 0;
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .admin-manage {
        .list-head {
            margin-bottom: 24px;
        }
        ::v-deep .el-image {
            width: 100%;
            height: 100%;
        }
        .real-name {
            ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
                width: 180px;
            }
            ::v-deep .el-input input {
                width: 180px;
            }
        }
        .add-admin-btn {
            margin-bottom: 24px;
            display: flex;
            justify-content: flex-end;
            .admin-search {
                display: inline-flex;
            }
        }
        .admin-page {
            text-align: right;
            margin-top: 24px;
        }
        .clap-at-will-container {
            width: 100%;
            max-height: 500px;
            overflow: auto;
            position: relative;
            ::v-deep .el-form-item {
                margin-bottom: 10px;
            }
            ::v-deep .el-form-item__label {
                font-weight: bold;
            }
            .patrol-img {
                width: 148px;
                height: 148px;
                object-fit: contain;
                cursor: pointer;
            }
            .upload-handle-imgs {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .handle-img {
                    width: 148px;
                    height: 148px;
                    margin: 0px 20px 20px 0;
                    position: relative;
                    border: 1px solid #e5e5e5;
                    border-radius: 5px;
                    .el-icon-close {
                        position: absolute;
                        top: -10px;
                        right: -10px;
                        background: rgba(0, 0, 0, .7);
                        border-radius: 50%;
                        cursor: pointer;
                        color: #fff;
                        padding: 4px;
                        border-radius: 50%;
                    }
                    &>img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        border-radius: 5px;
                    }
                }
            }
        }
    }
</style>